<template>
	<div class="threePhaseMeter">
		<ScaleBox :width="1920">
			<div class="container">
				<div class="leftCtn">
					<!-- 总表 -->
					<img class="imgBox" ref="image" src="../../assets/imgs/zongbiao.png" usemap="#image-map" @load="resizeMap" alt=""/>
					<map name="image-map">
						<area v-for="(item,index) in rectList" :shape="item.shape" :data-name="item.name" :coords="item.coords" alt="" href="#"/>
						<div class="screenBox">
							<svg ref="svgRef" style="width: 100%;height: 100%;">
								
								<!-- 象限 -->
								<g>
									<g transform="translate(0, 8)">
										<line x1="10" y1="23" x2="50" y2="23" stroke="#000" stroke-width="2"></line>
										<line x1="44" y1="19" x2="51" y2="23" stroke="#000" stroke-width="2"></line>
										<line x1="44" y1="27" x2="51" y2="23" stroke="#000" stroke-width="2"></line>
										<line x1="28" y1="2" x2="28" y2="41" stroke="#000" stroke-width="2"></line>
										<line x1="25" y1="6" x2="28" y2="2" stroke="#000" stroke-width="2"></line>
										<line x1="31" y1="6" x2="28" y2="2" stroke="#000" stroke-width="2"></line>
										<text x="47" y="36" fill="#000" font-size="12px">P</text>
										<text x="16" y="4" fill="#000" font-size="12px">Q</text>
										<!-- Ⅰ、Ⅱ、Ⅲ、Ⅳ -->
										<g v-if="currentShowItemObj.currentPage==1">
											<g>
												<path d="M 30, 21 L 30, 7 A 12, 12 0 0,1 44, 21 Z" fill="#00"/>
											</g>
											<text x="30" y="19" fill="#fff" font-size="10px">Ⅰ</text>
										</g>
										
										<g v-if="false">
											<g transform="translate(5, 51) rotate(-90)">
												<path d="M 30, 21 L 30, 7 A 12, 12 0 0,1 43, 21 Z" fill="#00"/>
											</g>
											<text x="15" y="19" fill="#fff" font-size="10px">Ⅱ</text>
										</g>
										
										<g v-if="false">
											<g transform="translate(56, 46) rotate(-180)">
												<path d="M 30, 21 L 30, 7 A 12, 12 0 0,1 43, 21 Z" fill="#00"/>
											</g>
											<text x="15" y="35" fill="#fff" font-size="10px">Ⅲ</text>
										</g>
										<g v-if="false">
											<g transform="translate(51, -5) rotate(90)">
												<path d="M 30, 21 L 30, 7 A 12, 12 0 0,1 44, 21 Z" fill="#00"/>
											</g>
											<text x="31" y="35" fill="#fff" font-size="10px">Ⅳ</text>
										</g>
									</g>
								</g>
								
								<!-- <text x="60" y="25" font-size="14px" >当前</text> -->
								<text v-if="false" x="80" y="25" font-size="14px">上</text>
								<text v-if="false" x="98" y="26" font-size="18px" font-family="LED" style="font-weight: 600;">1</text>
								<text v-if="false" x="105" y="25" font-size="14px">月</text>
								
								<text v-if="false" x="140" y="25" font-size="14px" >正向</text>
								<text v-if="false" x="140" y="25" font-size="14px" >组合</text>
								<text v-if="false" x="140" y="25" font-size="14px" >反向</text>
								<text v-if="false" x="180" y="25" font-size="14px" >有功</text>
								<text v-if="false" x="180" y="25" font-size="14px" >无功</text>
								<text v-if="false" x="205" y="25" font-size="14px">Ⅰ</text>
								<text v-if="false" x="207" y="25" font-size="14px">Ⅱ</text>
								<text v-if="false" x="209" y="25" font-size="14px">Ⅲ</text>
								<text v-if="false" x="209" y="25" font-size="14px">Ⅳ</text>
								
								<text v-if="false" x="230" y="25" font-size="14px" >总</text>
								<text v-if="false" x="245" y="25" font-size="14px" >尖</text>
								<text v-if="false" x="260" y="25" font-size="14px" >峰</text>
								<text v-if="false" x="275" y="25" font-size="14px" >平</text>
								<text v-if="false" x="290" y="25" font-size="14px" >谷</text>
								
								<text v-if="false" x="160" y="50" font-size="14px" >电量</text>
								<text v-if="currentShowItemObj.currentPage==1" x="160" y="50" font-size="14px" >电压</text>
								<text v-if="false" x="160" y="50" font-size="14px" >电流</text>
								<text v-if="false" x="270" y="50" font-size="14px" >功率</text>
								<text v-if="false" x="270" y="50" font-size="14px" >时间</text>
								<text v-if="false" x="160" y="50" font-size="14px" >需量</text>
								
								<text v-if="false" x="55" y="50" fill="#000" font-size="14px">A</text>
								<text v-if="currentShowItemObj.currentPage==1" x="75" y="50" fill="#000" font-size="14px">B</text>
								<text v-if="false" x="95" y="50" fill="#000" font-size="14px">C</text>
								<text v-if="false" x="55" y="50" fill="#000" font-size="14px">AB</text>
								<text v-if="false" x="75" y="50" fill="#000" font-size="14px">BC</text>
								<text v-if="false" x="95" y="50" fill="#000" font-size="14px">CA</text>
								<text v-if="false" x="115" y="50" fill="#000" font-size="14px">COS</text>
								<text v-if="false" x="145" y="50" fill="#000" font-size="14px">Φ</text>
								
								<circle cx="15" cy="80" r="9" stroke="black" stroke-width="1" fill="transparent" />
								<text x="9" y="85" fill="#000" font-size="12px">峰</text>
								
								<!-- <text x="268" y="100" text-anchor="end" font-family="LED" font-size="56">{{pageData.dataObj.voltageB}}</text> -->
								<!-- <text x="305" y="100" text-anchor="end" font-size="14">{{pageData.dataObj.voltageAUnit}}</text> -->
								
								<text x="300" y="100" text-anchor="end">
									<tspan font-family="LED" font-size="56">{{currentShowItemObj.dataObj.voltageB}}</tspan>
									<tspan font-size="14">{{currentShowItemObj.dataObj.voltageAUnit}}</tspan>
								</text>
								
								<text x="5" y="120" font-size="24px" font-family="LED" style="letter-spacing: 2px;">{{currentShowItemObj.dataObj.value1}}</text>
								<text x="5" y="143" font-size="24px" font-family="LED" style="letter-spacing: 2px;">{{currentShowItemObj.dataObj.value2}}</text>
								<text v-if="currentShowItemObj.dataObj.Ua" x="110" y="120" font-size="14px">Ua</text>
								<text v-if="currentShowItemObj.dataObj.Ub" x="130" y="120" font-size="14px">Ub</text>
								<text v-if="currentShowItemObj.dataObj.Uc" x="150" y="120" font-size="14px">Uc</text>
								<text v-if="currentShowItemObj.dataObj.Ia" x="200" y="120" font-size="14px">Ia</text>
								<text v-if="currentShowItemObj.dataObj.Ib" x="215" y="120" font-size="14px">Ib</text>
								<text v-if="currentShowItemObj.dataObj.Ic" x="230" y="120" font-size="14px">Ic</text>
								<text x="245" y="114" font-size="10px">①</text>
							</svg>
							
							<div class="yougong">
								<img class="clight_red_0" src="../../assets/imgs/clight_red_0.png" alt="">
								<img class="clight_red_1" src="../../assets/imgs/clight_red_1.png" alt="">
							</div>
							<div class="wugong">
								<img class="clight_red_0" src="../../assets/imgs/clight_red_0.png" alt="">
								<!-- <img class="clight_red_1" src="../../assets/imgs/clight_red_1.png" alt=""> -->
							</div>
							<div class="tiaozha">
								<img class="clight_red_0" src="../../assets/imgs/clight_red_0.png" alt="">
								<!-- <img class="clight_red_1" src="../../assets/imgs/clight_red_1.png" alt=""> -->
							</div>
							
							
						</div>
					</map>
				</div>
				<div class="rightCtn">
					<!-- 标题 -->
					<div class="title">电能表抄读记录卡</div>
					
					<!-- 头部信息 -->
					<div class="header-info">
						<div class="info-item">
							<span class="label">编号：</span>
							<el-input v-model="formData.number" size="small" class="input-inline"></el-input>
						</div>
						<div class="info-item">
							<span class="label">学员姓名：</span>
							<el-input v-model="formData.studentName" size="small" class="input-inline"></el-input>
						</div>
						<div class="info-item">
							<span class="label">单位：</span>
							<el-input v-model="formData.unit" size="small" class="input-inline"></el-input>
						</div>
					</div>
				
					<!-- 主表格 -->
					<table class="main-table" border="1" cellspacing="0" cellpadding="0">
						<!-- 表头第一行 -->
						<tr>
							<td rowspan="2" class="cell-center col-seq">序<br/>号</td>
							<td rowspan="2" class="cell-center col-record">记录<br/>数据</td>
							<td colspan="5" class="cell-center" style="padding: 15px;">电量示数类型</td>
							<td colspan="2" class="cell-center">运行参数</td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
							<td class="cell-center col-power">有功功率<br/>(kw)</td>
							<td class="col-empty"></td>
						</tr>
						<!-- 表头第二行 -->
						<tr>
							<td class="cell-center col-type">尖</td>
							<td class="cell-center col-type">峰</td>
							<td class="cell-center col-type">平</td>
							<td class="cell-center col-type">谷</td>
							<td class="cell-center col-type">总</td>
							<td class="cell-center col-voltage">电压(V)</td>
							<td><el-input v-model="formData.voltage" size="small"></el-input></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
							<td :rowspan="3" class="col-empty"></td>
						</tr>
						<!-- 表头第三行 -->
						<!-- <tr>
							<td colspan="5"></td>
							<td class="cell-center col-current">电流(A)</td>
						</tr> -->
						
						<!-- 数据行：序号1 - 正向有功电量 -->
						<tr>
							<td rowspan="2" class="cell-center">1</td>
							<td class="cell-label">正向有功<br/>电量(kw.h)</td>
							<td><el-input v-model="formData.forward.sharp" size="small"></el-input></td>
							<td><el-input v-model="formData.forward.peak" size="small"></el-input></td>
							<td><el-input v-model="formData.forward.flat" size="small"></el-input></td>
							<td><el-input v-model="formData.forward.valley" size="small"></el-input></td>
							<td><el-input v-model="formData.forward.total" size="small"></el-input></td>
							<td class="cell-center col-current">电流(A)</td>
							<td><el-input v-model="formData.forward.sharp" size="small"></el-input></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
						</tr>
						<!-- 数据行：序号1 - 反向有功电量 -->
						<tr>
							<td class="cell-label">反向有功<br/>电量(kw.h)</td>
							<td><el-input v-model="formData.reverse.sharp" size="small"></el-input></td>
							<td><el-input v-model="formData.reverse.peak" size="small"></el-input></td>
							<td><el-input v-model="formData.reverse.flat" size="small"></el-input></td>
							<td><el-input v-model="formData.reverse.valley" size="small"></el-input></td>
							<td><el-input v-model="formData.reverse.total" size="small"></el-input></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
						</tr>
				
					</table>
				
					<!-- 底部表格 -->
					<table class="bottom-table" border="1" cellspacing="0" cellpadding="0">
						<tr>
							<td rowspan="7" class="cell-center" style="width: 76px;">2</td>
							<td colspan="4" class="section-title">计量装置项目检查</td>
							<td colspan="4" class="section-title">客户电能表信息</td>
						</tr>
				
						<tr>
							<td class="cell-center col-seq-bottom">序<br/>号</td>
							<td class="cell-center" style="width: 180px;">检查项目</td>
							<td class="cell-center" style="width: 120px;">检查结果</td>
							<td class="cell-center" style="width: 290px;">备注</td>
							<td class="cell-center">户&emsp;名</td>
							<td><el-input v-model="formData.userName" size="small"></el-input></td>
							<td class="cell-center">户&emsp;号</td>
							<td><el-input v-model="formData.userNo" size="small"></el-input></td>
						</tr>
				
						<tr>
							<td class="cell-center col-seq-inner">1</td>
							<td class="cell-label-bottom">计量装置封印</td>
							<td><el-input v-model="formData.FYResult" size="small"></el-input></td>
							<td><el-input v-model="formData.FYremark" size="small"></el-input></td>
							<td class="cell-center">电能表<br/>名&emsp;称</td>
							<td style="width: 273px;"><el-input v-model="formData.energyMeterName" size="small"></el-input></td>
							<td class="cell-center">型&emsp;号</td>
							<td style="width: 273px;"><el-input v-model="formData.energyMeterModel" size="small"></el-input></td>
						</tr>
				
						<tr>
							<td class="cell-center col-seq-inner">2</td>
							<td class="cell-label-bottom">表计有效期</td>
							<td><el-input v-model="formData.YXQResult" size="small"></el-input></td>
							<td><el-input v-model="formData.YXQremark" size="small"></el-input></td>
							<td class="cell-center">规&emsp;格</td>
							<td><el-input v-model="formData.energyMeterType" size="small"></el-input></td>
							<td class="cell-center">生产厂家</td>
							<td><el-input v-model="formData.energyMeterManufacturer" size="small"></el-input></td>
						</tr>
						<tr>
							<td class="cell-center col-seq-inner">3</td>
							<td class="cell-label-bottom">日历时钟</td>
							<td><el-input v-model="formData.SZResult" size="small"></el-input></td>
							<td><el-input v-model="formData.SZremark" size="small"></el-input></td>
							<td class="cell-center">出厂编号</td>
							<td><el-input v-model="formData.serialNum" size="small"></el-input></td>
							<td class="cell-center">精度等级</td>
							<td><el-input v-model="formData.accuracyClass" size="small"></el-input></td>
						</tr>
						<tr>
							<td class="cell-center col-seq-inner">4</td>
							<td class="cell-label-bottom">当前费率运行时段</td>
							<td><el-input v-model="formData.SDResult" size="small"></el-input></td>
							<td><el-input v-model="formData.SDremark" size="small"></el-input></td>
							<td class="cell-center">当前电价</td>
							<td><el-input size="small" v-model="formData.currentElectricityPrice" ></el-input></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
						</tr>
						<tr>
							<td class="cell-center col-seq-inner">5</td>
							<td class="cell-label-bottom">当前阶梯电价</td>
							<td><el-input size="small" v-model="formData.DJResult"></el-input></td>
							<td><el-input size="small" v-model="formData.DJremark"></el-input></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
							<td class="col-empty"></td>
						</tr>
					</table>
				</div>
			</div>
		
		</ScaleBox>
	</div>
</template>

<script src="./script.js"></script>

<style lang="less" src="./style.less" scoped></style>